<template>
    <div class="flexbox flexcolumn">
        <!-- 选择直播场次 -->
        <div class="w_bg pd_20 rd" style="display:block">
            <div class="font_16 color_01">选择直播场次</div>
            <div class="flexbox flexcenter flexbetween brand_head">
                <div class="flexbox flexcenter">
                    <div class="brand_item flexbox flexcenter active">
                        <span class="brand_title">按天数汇总</span>
                    </div>
                    <div class="brand_item flexbox flexcenter" @click="switchTab('/compasssingle')">
                        <span class="brand_title">按单场次</span>
                    </div>
                </div>
                <el-date-picker style="width:260px" value-format="yyyy-MM-dd" v-model="day" type="daterange" clearable size="small" @change="selectDay" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-table :data="tableData" class="com_table" max-height="700" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <el-table-column prop="" label="主播" min-width="260">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <img :src="scope.row.author_avatar" alt="" class="author_info_img">
                            <div class="live_author_info">
                                <div class="author_info_name">{{scope.row.title}}</div>
                                <div class="author_info_id">抖音号：{{scope.row.author_aweme_id}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="bind_product_cnt" label="带货商品数量" width="150">
                </el-table-column>
                <el-table-column prop="pay_money" label="直播间成交金额" width="150">
                </el-table-column>
                <el-table-column prop="cl_inlive_pay_combo_cnt" label="直播间成交件数" width="150">
                </el-table-column>
                <el-table-column prop="return_money" label="退款金额" width="140">
                </el-table-column>
                <el-table-column prop="pay_cnt" label="成交订单数" width="140">
                </el-table-column>
                <el-table-column prop="refund_cnt" label="退款订单数" width="140">
                </el-table-column>
            </el-table>
        </div>
        <!-- 整体店铺指标 -->
        <div class="w_bg pd_20 rd mt_12" style="display:block">
            <div class="flexbox flexcenter flexbetween">
                <div class="font_16 color_01">整体店铺指标</div>
                <div class="flexbox flexcenter">
                    <img src="../../assets/img/shop_time.svg" alt="">
                    <span class="shop_time font_14 color_02">直播总时长：{{startDate}}</span>
                </div>
            </div>
            <div class="pass_box mt_16">
                <div class="flexbox flexcenter">
                    <div class="pass_title">综合指标</div>
                    <span class="font_12 color_03 flexbox flexcenter" style="margin-left:10px"> <img src="../../assets/img/tips_icon2.svg" alt="" style="margin-right:2px"> 日期不跨天，可查看环比与趋势图</span>
                </div>
                <div class="zonghe_box flexbox flexcenter" v-loading="wh_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="zonghe_item flexbox flexcolumn flexjust" :class="{'active':trendInfo.type=='cost'}" @click="changeCount('cost')">
                        <span class="zh_text">消耗金额</span>
                        <div class="zh_val">￥{{zongheInfo.cost}}</div>
                        <div class="flexbox flexcenter">
                            <template v-if="zongheInfo.ring_cost != null">
                                <div class="zh_rat green" v-if="zongheInfo.ring_cost<0">
                                    环比
                                    <i class="el-icon-caret-bottom"></i>
                                    {{zongheInfo.ring_cost | keepTwoNum}}%
                                </div>
                                <div class="zh_rat red" v-else>
                                    环比
                                    <i class="el-icon-caret-top"></i>
                                    {{zongheInfo.ring_cost | keepTwoNum}}%
                                </div>
                            </template>
                            <div class="zh_rat" v-else>
                                环比 --
                            </div>
                            <el-tooltip content="（本期消耗-上期消耗）/上期消耗" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust" :class="{'active':trendInfo.type=='return_money'}" @click="changeCount('return_money')">
                        <span class="zh_text">退货金额</span>
                        <div class="zh_val">￥{{zongheInfo.return_money}}</div>
                        <div class="flexbox flexcenter">
                            <template v-if="zongheInfo.ring_return != null">
                                <div class="zh_rat green" v-if="zongheInfo.ring_return<0">
                                    环比
                                    <i class="el-icon-caret-bottom"></i>
                                    {{zongheInfo.ring_return | keepTwoNum}}%
                                </div>
                                <div class="zh_rat red" v-else>
                                    环比
                                    <i class="el-icon-caret-top"></i>
                                    {{zongheInfo.ring_return | keepTwoNum}}%
                                </div>
                            </template>
                            <div class="zh_rat" v-else>
                                环比 --
                            </div>
                            <el-tooltip content="（本期退款-上期退款）/上期退款" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust" :class="{'active':trendInfo.type=='pay_money'}" @click="changeCount('pay_money')">
                        <span class="zh_text">成交金额</span>
                        <div class="zh_val">￥{{zongheInfo.pay_money}}</div>
                        <div class="flexbox flexcenter">
                            <template v-if="zongheInfo.ring_money != null">
                                <div class="zh_rat green" v-if="zongheInfo.ring_money<0">
                                    环比
                                    <i class="el-icon-caret-bottom"></i>
                                    {{zongheInfo.ring_money | keepTwoNum}}%
                                </div>
                                <div class="zh_rat red" v-else>
                                    环比
                                    <i class="el-icon-caret-top"></i>
                                    {{zongheInfo.ring_money | keepTwoNum}}%
                                </div>
                            </template>
                            <div class="zh_rat" v-else>
                                环比 --
                            </div>
                            <el-tooltip content="（本期成交-上期成交）/上期成交" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust" :class="{'active':trendInfo.type=='roi'}" @click="changeCount('roi')">
                        <span class="zh_text flexbox flexcenter">
                            成交ROI
                            <el-tooltip content="成交金额/消耗" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <div class="zh_val">{{Math.floor(zongheInfo.roi*100)/100}}</div>
                        <div class="flexbox flexcenter">
                            <template v-if="zongheInfo.ring_roi != null">
                                <div class="zh_rat green" v-if="zongheInfo.ring_roi<0">
                                    环比
                                    <i class="el-icon-caret-bottom"></i>
                                    {{zongheInfo.ring_roi | keepTwoNum}}%
                                </div>
                                <div class="zh_rat red" v-else>
                                    环比
                                    <i class="el-icon-caret-top"></i>
                                    {{zongheInfo.ring_roi | keepTwoNum}}%
                                </div>
                            </template>
                            <div class="zh_rat" v-else>
                                环比 --
                            </div>
                            <el-tooltip content="（本期roi-上期roi）/上期roi" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust" :class="{'active':trendInfo.type=='pay_roi'}" @click="changeCount('pay_roi')">
                        <span class="zh_text flexbox flexcenter">
                            实际ROI
                            <el-tooltip content="（成交金额-退款金额）/消耗" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <div class="zh_val">{{Math.floor(zongheInfo.pay_roi*100)/100}}</div>
                        <div class="flexbox flexcenter">
                            <template v-if="zongheInfo.ring_payroi != null">
                                <div class="zh_rat green" v-if="zongheInfo.ring_payroi<0">
                                    环比
                                    <i class="el-icon-caret-bottom"></i>
                                    {{zongheInfo.ring_payroi | keepTwoNum}}%
                                </div>
                                <div class="zh_rat red" v-else>
                                    环比
                                    <i class="el-icon-caret-top"></i>
                                    {{zongheInfo.ring_payroi | keepTwoNum}}%
                                </div>
                            </template>
                            <div class="zh_rat" v-else>
                                环比 --
                            </div>
                            <el-tooltip content="（本期实际roi-上期实际roi）/上期实际roi" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust" :class="{'active':trendInfo.type=='returnpro_rate'}" @click="changeCount('returnpro_rate')">
                        <span class="zh_text flexbox flexcenter">
                            退单率
                            <el-tooltip content="退款订单数/成交订单数" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <div class="zh_val">{{zongheInfo.returnpro_rate | keepTwoNum}}%</div>
                        <div class="flexbox flexcenter">
                            <template v-if="zongheInfo.ring_returnpro_rate != null">
                                <div class="zh_rat green" v-if="zongheInfo.ring_returnpro_rate<0">
                                    环比
                                    <i class="el-icon-caret-bottom"></i>
                                    {{zongheInfo.ring_returnpro_rate | keepTwoNum}}%
                                </div>
                                <div class="zh_rat red" v-else>
                                    环比
                                    <i class="el-icon-caret-top"></i>
                                    {{zongheInfo.ring_returnpro_rate | keepTwoNum}}%
                                </div>
                            </template>
                            <div class="zh_rat" v-else>
                                环比 --
                            </div>
                            <el-tooltip content="（本期退单率-上期退单率）/上期退单率" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust" :class="{'active':trendInfo.type=='returnmoney_rate'}" @click="changeCount('returnmoney_rate')">
                        <span class="zh_text flexbox flexcenter">
                            退款率
                            <el-tooltip content="退款金额/成交金额" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <div class="zh_val">{{zongheInfo.returnmoney_rate | keepTwoNum}}%</div>
                        <div class="flexbox flexcenter">
                            <template v-if="zongheInfo.ring_returnmoney_rate != null">
                                <div class="zh_rat green" v-if="zongheInfo.ring_returnmoney_rate<0">
                                    环比
                                    <i class="el-icon-caret-bottom"></i>
                                    {{zongheInfo.ring_returnmoney_rate | keepTwoNum}}%
                                </div>
                                <div class="zh_rat red" v-else>
                                    环比
                                    <i class="el-icon-caret-top"></i>
                                    {{zongheInfo.ring_returnmoney_rate | keepTwoNum}}%
                                </div>
                            </template>
                            <div class="zh_rat" v-else>
                                环比 --
                            </div>
                            <el-tooltip content="（本期退款率-上期退款率）/上期退款率" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:5px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust">
                        <span class="zh_text flexbox flexcenter">
                            GPM
                            <el-tooltip content="成交订单金额/直播间观看人次*1000" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <div class="zh_val">{{zongheInfo.gpm}}</div>
                        <div class="flexbox flexcenter">
                            <div class="zh_rat">
                                
                            </div>
                        </div>
                    </div>
                    <div class="zonghe_item flexbox flexcolumn flexjust">
                        <span class="zh_text flexbox flexcenter">
                            人均观看时长
                            <!-- <el-tooltip content="成交订单金额/直播间观看人次*1000" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip> -->
                        </span>
                        <div class="zh_val">{{secondToTimeStr(zongheInfo.avg_watch_duration)}}</div>
                        <div class="flexbox flexcenter">
                            <div class="zh_rat">
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data_chart" v-if="this.x_data.length>0" key="time" style="height:384px;" v-loading="tr_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div id="timeChart" style="height:384px;"></div>
                </div>
                <div class="zonghe_line"></div>
                <div class="pass_title">来源</div>
                <div class="font_14 color_02 mt_16">流量来源</div>
                <div class="flow_title flexbox flexcenter mt_12">
                    <div class="flow_item flexbox flexcenter flexbetween blue" :style="{width:pay_rate_width+'%'}">
                        <span>付费人数</span>
                        <span>{{pay_rate}}%</span>
                    </div>
                    <div class="flow_item flexbox flexcenter flexbetween green" :style="{width:natural_rate_width+'%'}">
                        <span>免费人数</span>
                        <span>{{natural_rate}}%</span>
                    </div>
                </div>
                <div class="deal_box flexbox flexcenter mt_12" v-loading="pay_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="deal_left">
                        <div class="flexbox flexcenter flexcolumn flexjust" style="height:200px" v-if="payFlow.length==0">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无数据</div>
                        </div>
                        <div style="width:200px;height:200px" key="chart" v-else>
                            <div id="dirPieChart" style="width:200px;height:200px"></div>
                        </div>
                    </div>
                    <div class="deal_right flex flexbox flexcenter flexbetween">
                        <div class="deal_pay">
                            <div class="font_12 color_02" style="text-align:center;line-height:160px" v-if="payFlow.length==0">暂无数据</div>
                            <template v-else>
                                <div class="deal_item flexbox flexcenter flexbetween">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle pay_circle_blue"></span>
                                        <span class="color_01">付费流量</span>
                                    </div>
                                    <div class="deal_val color_01">{{pay_rate_all}}%</div>
                                </div>
                                <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in payFlow" :key="index">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle"></span>
                                        <span class="color_02">{{item.title}}</span>
                                    </div>
                                    <div class="deal_val color_02">{{(Number(item.rate)*100).toFixed(0)}}%</div>
                                </div>
                            </template>
                        </div>
                        <div class="deal_live">
                            <div class="font_12 color_02" style="text-align:center;line-height:160px" v-if="naturalFlow.length==0">暂无数据</div>
                            <template v-else>
                                <div class="deal_item flexbox flexcenter flexbetween">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle pay_circle_green"></span>
                                        <span class="color_01">直播自然推荐流量</span>
                                    </div>
                                    <div class="deal_val color_01">{{natural_rate_all}}%</div>
                                </div>
                                <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in naturalFlow" :key="index">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle"></span>
                                        <span class="color_02">{{item.title}}</span>
                                    </div>
                                    <div class="deal_val color_02">{{(Number(item.rate)*100).toFixed(0)}}%</div>
                                </div>
                            </template>
                        </div>
                        <div class="deal_other">
                            <div class="font_12 color_02" style="text-align:center;line-height:160px" v-if="otherFlow.length==0">暂无数据</div>
                            <template v-else>
                                <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in otherFlow" :key="index">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle" :class="'pay_circle_'+index"></span>
                                        <span class="color_01">{{item.title}}</span>
                                    </div>
                                    <div class="deal_val color_01">{{(Number(item.rate)*100).toFixed(0)}}%</div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="font_14 color_02 mt_16" style="margin-top:48px">成交来源</div>
                <div class="flow_title flexbox flexcenter mt_12" v-loading="deal_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="flow_item flexbox flexcenter flexbetween blue" :style="{width:deal_pay_rate_width+'%'}">
                        <span>付费成交</span>
                        <span>{{deal_pay_rate}}%</span>
                    </div>
                    <div class="flow_item flexbox flexcenter flexbetween green" :style="{width:deal_natural_rate_width+'%'}">
                        <span>免费成交</span>
                        <span>{{deal_natural_rate}}%</span>
                    </div>
                </div>
                <div class="deal_box flexbox flexcenter mt_12" v-loading="pay_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="deal_left">
                        <div class="flexbox flexcenter flexcolumn flexjust" style="height:200px" v-if="dealPayFlow.length==0">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无数据</div>
                        </div>
                        <div style="width:200px;height:200px" key="chart" v-else>
                            <div id="dealPieChart" style="width:200px;height:200px"></div>
                        </div>
                    </div>
                    <div class="deal_right flex flexbox flexcenter flexbetween">
                        <div class="deal_pay">
                            <div class="font_12 color_02" style="text-align:center;line-height:160px" v-if="dealPayFlow.length==0">暂无数据</div>
                            <template v-else>
                                <div class="deal_item flexbox flexcenter flexbetween">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle pay_circle_blue"></span>
                                        <span class="color_01">付费流量</span>
                                    </div>
                                    <div class="deal_val color_01">{{deal_pay_rate_all}}%</div>
                                </div>
                                <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in dealPayFlow" :key="index">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle"></span>
                                        <span class="color_02">{{item.title}}</span>
                                    </div>
                                    <div class="deal_val color_02">{{(Number(item.rate)*100).toFixed(0)}}%</div>
                                </div>
                            </template>
                        </div>
                        <div class="deal_live">
                            <div class="font_12 color_02" style="text-align:center;line-height:160px" v-if="dealNaturalFlow.length==0">暂无数据</div>
                            <template v-else>
                                <div class="deal_item flexbox flexcenter flexbetween">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle pay_circle_green"></span>
                                        <span class="color_01">直播自然推荐流量</span>
                                    </div>
                                    <div class="deal_val color_01">{{deal_natural_rate_all}}%</div>
                                </div>
                                <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in dealNaturalFlow" :key="index">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle"></span>
                                        <span class="color_02">{{item.title}}</span>
                                    </div>
                                    <div class="deal_val color_02">{{(Number(item.rate)*100).toFixed(0)}}%</div>
                                </div>
                            </template>
                        </div>
                        <div class="deal_other">
                            <div class="font_12 color_02" style="text-align:center;line-height:160px" v-if="dealOtherFlow.length==0">暂无数据</div>
                            <template v-else>
                                <div class="deal_item flexbox flexcenter flexbetween" v-for="(item,index) in dealOtherFlow" :key="index">
                                    <div class="deal_title flexbox flexcenter">
                                        <span class="pay_circle" :class="'pay_circle_'+index"></span>
                                        <span class="color_01">{{item.title}}</span>
                                    </div>
                                    <div class="deal_val color_01">{{(Number(item.rate)*100).toFixed(0)}}%</div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 流量 -->
        <div class="w_bg pd_20 rd mt_12" style="display:block">
            <div class="font_16 color_01">流量</div>
            <div class="pass_box mt_16">
                <div class="pass_title">付费观看人次</div>
                <div class="flow_count flexbox flexcenter">
                    <div class="font_16 color_01">汇总</div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">直播间观看人次</div>
                        <div class="count_val">{{ffCount.luban_live_enter_cnt}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">ROI</div>
                        <div class="count_val">{{Math.floor(ffCount.roi*100)/100}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text flexbox flexcenter">
                            转化率
                            <el-tooltip content="成交订单数/直播间观看人次" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                        <div class="count_val">{{ffCount.ratio | keepTwoNum}}%</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text flexbox flexcenter">
                            GPM
                            <el-tooltip content="成交订单金额/直播间观看人次*1000" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                        <div class="count_val">{{ffCount.gpm}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">总消耗</div>
                        <div class="count_val">{{ffCount.stat_cost}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">总成交订单金额</div>
                        <div class="count_val">{{ffCount.pay_order_amount}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">总成交订单数</div>
                        <div class="count_val">{{ffCount.pay_order_count}}</div>
                    </div>
                </div>
                <div class="pay_wach_box flexbox" v-loading="mf_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="flexbox flexcenter flexcolumn flexjust" style="width:100%;height:300px" v-if="ffWatch.length==0">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <template v-else>
                        <div class="pay_wach_item" v-for="(item,index) in ffWatch" :key="index">
                            <div class="wach_top flexbox flexcenter">
                                <img src="../../assets/img/ff_icon1.svg" alt="" v-if="item.types==1">
                                <img src="../../assets/img/ff_icon2.svg" alt="" v-else-if="item.types==2">
                                <img src="../../assets/img/ff_icon3.svg" alt="" v-else-if="item.types==3">
                                <span class="wach_title font_14 color_01">{{item.title}}</span>
                            </div>
                            <div class="wach_bot">
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text">直播间观看人次</span>
                                    <span class="wach_val">{{item.luban_live_enter_cnt}}</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        ROI
                                        <el-tooltip content="成交订单金额/消耗" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val"> {{Math.floor(item.roi*100)/100}}</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        转化率
                                        <el-tooltip content="成交订单数/直播间观看人次" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val">{{item.ratio | keepTwoNum}}%</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        观看占比
                                        <el-tooltip content="单个类型直播间观看人次/整体直播间观看人次" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val">{{item.proportion | keepTwoNum}}%</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        GPM
                                        <el-tooltip content="成交订单金额/直播间观看人次*1000" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val">{{item.gpm | keepTwoNumT}}</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        消耗占比
                                        <el-tooltip content="单个类型消耗/整体消耗" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val">{{item.cost_rate | keepTwoNum}}%</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        gmv占比
                                        <el-tooltip content="单个类型gmv/整体gmv" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val">{{item.gmv_rate | keepTwoNum}}%</span>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="zonghe_line"></div>
                <div class="pass_title">免费观看人次</div>
                <div class="flow_count flexbox flexcenter">
                    <div class="font_16 color_01">汇总</div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">直播间进入人次</div>
                        <div class="count_val">{{mfCount.frequency}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text flexbox flexcenter">
                            转化率
                            <el-tooltip content="成交订单数/进入直播间人次" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                        <div class="count_val">{{mfCount.ratio | keepTwoNum}}%</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">成交金额</div>
                        <div class="count_val">{{mfCount.pay_money | keepTwoNumT}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text">订单数</div>
                        <div class="count_val">{{mfCount.pay_cnt}}</div>
                    </div>
                    <div class="count_line"></div>
                    <div class="count_item">
                        <div class="count_text flexbox flexcenter">
                            GPM
                            <el-tooltip content="成交订单金额/直播间观看人次*1000" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </div>
                        <div class="count_val">{{mfCount.gpm}}</div>
                    </div>
                </div>
                <div class="pay_wach_box flexbox" v-loading="mf_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="flexbox flexcenter flexcolumn flexjust" style="width:100%;height:300px" v-if="mfWatch.length==0">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <template v-else>
                        <div class="pay_wach_item" v-for="(item,index) in mfWatch" :key="index">
                            <div class="wach_top flexbox flexcenter">
                                <img src="../../assets/img/mf_icon1.svg" alt="" v-if="item.structure_type==1">
                                <img src="../../assets/img/mf_icon2.svg" alt="" v-else-if="item.structure_type==2">
                                <img src="../../assets/img/mf_icon3.svg" alt="" v-else-if="item.structure_type==3">
                                <img src="../../assets/img/mf_icon4.svg" alt="" v-else-if="item.structure_type==4">
                                <img src="../../assets/img/mf_icon5.svg" alt="" v-else-if="item.structure_type==5">
                                <span class="wach_title font_14 color_01">{{item.title}}</span>
                            </div>
                            <div class="wach_bot">
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text">直播间进入人次</span>
                                    <span class="wach_val">{{item.frequency}}</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        转化率
                                        <el-tooltip content="成交订单数/进入直播间人次" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val">{{item.ratio | keepTwoNum}}%</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text flexbox flexcenter">
                                        观看占比
                                        <el-tooltip content="单类型进入直播间人次/整体进入直播间人次" placement="top">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                                <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                                <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                            </svg>
                                        </el-tooltip>
                                    </span>
                                    <span class="wach_val">{{item.proportion | keepTwoNum}}%</span>
                                </div>
                                <div class="wach_bot_item flexbox flexcenter flexbetween">
                                    <span class="wach_text">停留时长</span>
                                    <span class="wach_val">{{secondToTimeStr(Number(item.duration).toFixed(0))}}</span>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="pass_box mt_16" v-loading="an_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="pass_title">
                            用户行为分析
                        </div>
                        <span class="font_12 color_03 flexbox flexcenter" style="margin-left:10px"> <img src="../../assets/img/tips_icon2.svg" alt="" style="margin-right:2px"> 日期跨天，才可查看用户分析数据</span>
                    </div>
                    <div class="flexbox flexcenter" v-if="tableData3.length>0">
                        <span class="analysis_item flexbox flexcenter" :class="{'active':analysisType==1}" @click="selectAnalysisShow(1)">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#95A5C9" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 7.5C20 9.70914 18.2091 11.5 16 11.5C13.7909 11.5 12 9.70914 12 7.5C12 5.29086 13.7909 3.5 16 3.5C18.2091 3.5 20 5.29086 20 7.5Z" stroke="inherit" stroke-width="2" />
                                <path d="M10.5 13.5C10.5 15.1569 9.15685 16.5 7.5 16.5C5.84315 16.5 4.5 15.1569 4.5 13.5C4.5 11.8431 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 11.8431 10.5 13.5Z" stroke="inherit" stroke-width="2" />
                                <path d="M17.5 17.5C17.5 18.6046 16.6046 19.5 15.5 19.5C14.3954 19.5 13.5 18.6046 13.5 17.5C13.5 16.3954 14.3954 15.5 15.5 15.5C16.6046 15.5 17.5 16.3954 17.5 17.5Z" stroke="inherit" stroke-width="2" />
                            </svg>
                        </span>
                        <span class="analysis_item flexbox flexcenter" :class="{'active':analysisType==2}" @click="selectAnalysisShow(2)">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#95A5C9" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.5 5C3.5 4.44772 3.94772 4 4.5 4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H4.5C3.94772 20 3.5 19.5523 3.5 19V5Z" stroke="inherit" stroke-width="2" />
                                <path d="M3 9.5H20" stroke="inherit" stroke-width="2" />
                                <path d="M3 13H20" stroke="inherit" stroke-width="2" />
                                <path d="M9 20.5L9 10M14.5 20.5L14.5 10" stroke="inherit" stroke-width="2" />
                                <path d="M3 16.5H20" stroke="inherit" stroke-width="2" />
                            </svg>
                        </span>
                    </div>
                </div>
                <template v-if="tableData3.length>0">
                    <div v-if="analysisType==1" class="mt_16">
                        <el-select v-model="analysisValue" size="medium" placeholder="请选择类型" @change="changeAnalysisType">
                            <el-option label="机会→行动" :value="-1"></el-option>
                            <el-option label="了解→行动" :value="1"></el-option>
                            <el-option label="吸引→行动" :value="2"></el-option>
                            <el-option label="问询→行动" :value="3"></el-option>
                            <el-option label="行动→行动" :value="4"></el-option>
                        </el-select>
                        <div style="height:539px;width:100%" key="analychart">
                            <div id="analysisChart" style="width:100%;height:539px"></div>
                        </div>
                    </div>
                    <el-table v-else key="analytable" :data="tableData3" class="com_table" max-height="700">
                        <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无数据</div>
                        </div>
                        <el-table-column prop="" label="类型" min-width="202">
                            <template slot-scope="scope">
                                <el-link type="primary" :underline="false" v-if="scope.row.from_card==-1">机会→行动</el-link>
                                <el-link type="primary" :underline="false" v-else-if="scope.row.from_card==1">了解→行动</el-link>
                                <el-link type="primary" :underline="false" v-else-if="scope.row.from_card==2">吸引→行动</el-link>
                                <el-link type="primary" :underline="false" v-else-if="scope.row.from_card==3">问询→行动</el-link>
                                <el-link type="primary" :underline="false" v-else-if="scope.row.from_card==4">行动→行动</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="bind_product_cnt" label="类目" min-width="202">
                            <template slot-scope="scope">
                                <template v-if="scope.row.category==1">短视频/图文带货</template>
                                <template v-else-if="scope.row.category==2">直播带货</template>
                                <template v-else-if="scope.row.category==3">feedslive</template>
                                <!-- {{scope.row.category==1?'短视频/图文带货':'直播带货'}} -->
                            </template>
                        </el-table-column>
                        <el-table-column prop="flow_rate" label="流转率" min-width="202">
                            <template slot-scope="scope">
                                {{scope.row.flow_rate | keepTwoNum}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="compete_flow_rate" label="对比品牌均值流转率" min-width="202">
                            <template slot-scope="scope">
                                {{scope.row.compete_flow_rate | keepTwoNum}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="flow_num" label="流转规模" min-width="202">
                        </el-table-column>
                        <el-table-column prop="compete_flow_num" label="对比品牌均值流转规模" min-width="202">
                        </el-table-column>
                    </el-table>
                </template>
                <div class="flexbox flexcenter flexcolumn flexjust" style="width:100%;height:300px" v-else>
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
            </div>
        </div>
        <!-- 看播→成交转化率 -->
        <div class="w_bg pd_20 rd mt_12" style="display:block">
            <div class="font_16 color_01">看播→成交转化率</div>
            <div class="pass_box mt_16">
                <div class="pass_title">流量转化路径</div>
                <div class="flexbox flexcenter flexcolumn flexjust" style="width:100%;height:300px" v-if="!is_flow">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <template v-else>
                    <div class="rat_box flexbox flexjust flexcenter">
                        <div class="rat_item flexbox flexjust flexcenter">
                            <span class="blue"></span>
                            广告流量
                        </div>
                        <div class="rat_item flexbox flexjust flexcenter">
                            <span class="green"></span>
                            自然流量
                        </div>
                    </div>
                    <div class="rat_content" v-loading="ad_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <img src="../../assets/img/flow_bg.png" alt="" class="flow_bg">
                        <span class="rat_text rat_text1">直播间曝光</span>
                        <span class="rat_text rat_text2">进入直播间</span>
                        <span class="rat_text rat_text3">商品点击</span>
                        <span class="rat_text rat_text4">创建订单</span>
                        <span class="rat_text rat_text5">成交</span>
                        <span class="rat_text rat_text6">{{adverTraffic.show_room_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_l rat_text7">{{adverTraffic.enter_room_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_l rat_text8">{{adverTraffic.click_product_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_l rat_text9">{{adverTraffic.create_order_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_l rat_text10">{{adverTraffic.pay_order_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_r rat_text7">{{naturalTraffic.enter_room_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_r rat_text8">{{naturalTraffic.click_product_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_r rat_text9">{{naturalTraffic.create_order_uv}}人</span>
                        <span class="rat_text rat_value_box rat_value_box_r rat_text10">{{naturalTraffic.pay_order_uv}}人</span>
                        <span class="rat_text_black rat_text11 flexbox flexcenter">
                            {{adverTraffic.total_trans_ratio | keepTwoNum}}%
                            <el-tooltip content="成交订单/进入直播间" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <span class="rat_text_black rat_text12 flexbox flexcenter">
                            {{adverTraffic.enter_click_ratio | keepTwoNum}}%
                            <el-tooltip content="商品点击/进入直播间" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <span class="rat_text_black rat_text13 flexbox flexcenter">
                            {{adverTraffic.click_trans_ratio | keepTwoNum}}%
                            <el-tooltip content="创建订单/商品点击" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <span class="rat_text_black rat_text14 flexbox flexcenter">
                            {{adverTraffic.create_trans_ratio | keepTwoNum}}%
                            <el-tooltip content="成交订单/创建订单" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <span class="rat_text_black rat_text15 flexbox flexcenter">
                            {{naturalTraffic.total_trans_ratio | keepTwoNum}}%
                            <el-tooltip content="成交订单/进入直播间" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <span class="rat_text_black rat_text16 flexbox flexcenter">
                            {{naturalTraffic.enter_click_ratio | keepTwoNum}}%
                            <el-tooltip content="商品点击/进入直播间" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <span class="rat_text_black rat_text17 flexbox flexcenter">
                            {{naturalTraffic.click_trans_ratio | keepTwoNum}}%
                            <el-tooltip content="创建订单/商品点击" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                        <span class="rat_text_black rat_text18 flexbox flexcenter">
                            {{naturalTraffic.create_trans_ratio | keepTwoNum}}%
                            <el-tooltip content="成交订单/创建订单" placement="top">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                    <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                    <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                </svg>
                            </el-tooltip>
                        </span>
                    </div>
                </template>

            </div>
            <div class="pass_box mt_16">
                <div class="pass_title">商品转化路径</div>
                <div class="flexbox flexcenter flexcolumn flexjust" style="width:100%;height:300px" v-if="!is_shop">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <template v-else>
                    <div class="shop_content" v-loading="sp_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <img src="../../assets/img/flow_bg2.png" alt="" class="flow_bg">
                        <div class="shop_rat_text shop_rat_text10">
                            <div class="shop_rat_val">{{shopConversion.show_room_uv}}</div>
                            <div class="shop_rat_title">直播间曝光数</div>
                        </div>
                        <div class="shop_rat_text shop_rat_text1">
                            <div class="shop_rat_val">{{shopConversion.enter_room_uv}}</div>
                            <div class="shop_rat_title">直播间进入人数</div>
                        </div>
                        <div class="shop_rat_text shop_rat_text2">
                            <div class="shop_rat_val">{{shopConversion.show_product_uv}}</div>
                            <div class="shop_rat_title">商品曝光数</div>
                        </div>
                        <div class="shop_rat_text shop_rat_text3">
                            <div class="shop_rat_val">{{shopConversion.click_product_uv}}</div>
                            <div class="shop_rat_title">商品点击人数</div>
                        </div>
                        <div class="shop_rat_text shop_rat_text4">
                            <div class="shop_rat_val">{{shopConversion.pay_order_uv}}</div>
                            <div class="shop_rat_title">成交人数</div>
                        </div>
                        <div class="shop_rat_text shop_rat_text11">
                            <div class="shop_rat_val">用户可不进入直播间，直接通过点击</div>
                            <div class="shop_rat_title">直播预览流的商品卡片查看商品</div>
                        </div>
                        <div class="shop_rat_text shop_rat_text5">
                            <div class="shop_rat_val flexbox flexcenter">
                                客单价：{{shopConversion.price}}
                                <el-tooltip content="成交金额/成交人数" placement="top">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                        <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#fff" />
                                        <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#fff" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="shop_rat_title">成交金额：{{shopConversion.pay_money}}</div>
                        </div>
                        <div class="shop_rat_text_black shop_rat_text6">
                            <div class="shop_rat_val flexbox flexcenter flexjust">
                                {{shopConversion.total_trans_ratio | keepTwoNum}}%
                                <el-tooltip content="成交人数/直播间曝光人数" placement="top">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                        <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                        <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="shop_rat_title">整体成交转化率</div>
                        </div>
                        <div class="shop_rat_text_black shop_rat_text7">
                            <div class="shop_rat_val flexbox flexcenter flexjust">
                                {{shopConversion.show_enter_ratio | keepTwoNum}}%
                                <el-tooltip content="直播间进入人数/直播间曝光人数" placement="top">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                        <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                        <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="shop_rat_title">看播率</div>
                        </div>
                        <div class="shop_rat_text_black shop_rat_text8">
                            <div class="shop_rat_val flexbox flexcenter flexjust">
                                {{shopConversion.enter_proshow_ratio | keepTwoNum}}%
                                <el-tooltip content="商品曝光人数/直播间进入人数" placement="top">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                        <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                        <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="shop_rat_title" style="line-height:16px">进入<br />曝光转化率</div>
                        </div>
                        <div class="shop_rat_text_black shop_rat_text9">
                            <div class="shop_rat_val flexbox flexcenter flexjust">
                                {{shopConversion.proshow_proclick_ratio | keepTwoNum}}%
                                <el-tooltip content="商品点击人数/商品曝光人数" placement="top">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                        <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                        <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="shop_rat_title" style="line-height:16px">曝光<br />点击转化率</div>
                        </div>
                        <div class="shop_rat_text_black shop_rat_text12">
                            <div class="shop_rat_val flexbox flexcenter flexjust">
                                {{shopConversion.proclick_pay | keepTwoNum}}%
                                <el-tooltip content="点击人数/成交人数" placement="top">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px;margin-top:-2px">
                                        <path d="M15.7 9.00005C15.7 12.7004 12.7003 15.7 8.99999 15.7C5.29968 15.7 2.29999 12.7004 2.29999 9.00005C2.29999 5.29974 5.29968 2.30005 8.99999 2.30005C12.7003 2.30005 15.7 5.29974 15.7 9.00005Z" stroke="#B4B7BD" />
                                        <path d="M9.10802 5.625C8.38094 5.625 7.81107 5.83269 7.38859 6.24808C6.95627 6.66346 6.74994 7.23709 6.74994 7.96896H7.87003C7.87003 7.55357 7.94863 7.2272 8.11566 6.99972C8.30234 6.7228 8.60693 6.59423 9.03924 6.59423C9.3733 6.59423 9.63859 6.68324 9.82527 6.87115C10.0021 7.05907 10.1004 7.31621 10.1004 7.64258C10.1004 7.88984 10.0119 8.1272 9.83509 8.34478L9.71719 8.48324C9.07854 9.05687 8.69535 9.47225 8.56762 9.73929C8.43007 10.0063 8.37112 10.3327 8.37112 10.7085V10.847H9.50103V10.7085C9.50103 10.4712 9.55016 10.2635 9.64841 10.0657C9.73684 9.88764 9.86457 9.71951 10.0414 9.57115C10.513 9.15577 10.798 8.88874 10.8864 8.78984C11.1222 8.47335 11.2499 8.06786 11.2499 7.57335C11.2499 6.97006 11.0534 6.49533 10.6604 6.14918C10.2674 5.79313 9.74666 5.625 9.10802 5.625ZM8.91151 11.7027C8.69535 11.7027 8.5185 11.7719 8.37112 11.9104C8.22374 12.0488 8.15496 12.2268 8.15496 12.4444C8.15496 12.662 8.22374 12.84 8.37112 12.9785C8.5185 13.117 8.69535 13.1961 8.91151 13.1961C9.12767 13.1961 9.30452 13.1268 9.4519 12.9884C9.59928 12.8499 9.67789 12.662 9.67789 12.4444C9.67789 12.2268 9.59928 12.0488 9.46173 11.9104C9.31435 11.7719 9.12767 11.7027 8.91151 11.7027Z" fill="#B4B7BD" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="shop_rat_title" style="line-height:16px">点击<br />成交转化率</div>
                        </div>
                    </div>
                </template>
                <div class="zonghe_line"></div>
                <div class="pass_title">直播商品列表</div>
                <el-table :data="tableData2" class="com_table" max-height="600" @sort-change='sortChange'>
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="" label="商品信息" min-width="370">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <img :src="scope.row.img" alt="" class="live_img">
                                <div class="live_name">{{scope.row.title}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="explain_cnt" label="讲解次数" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_money" label="成交金额" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_number" label="成交件数" min-width="120" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_people" label="成交人数" min-width="120" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_order" label="成交订单数" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="show_number" label="商品曝光人数" min-width="150" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="click_product" label="商品点击人数" min-width="180" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="return_number" label="退款人数" min-width="120" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="return_order" label="退款订单数" min-width="140" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="return_money" label="退款金额" min-width="140" sortable="custom">
                    </el-table-column>
                    
                    <el-table-column prop="product_show_click_ucnt_ratio" label="曝光-点击率(%)" min-width="180">
                        <template slot-scope="scope">
                            {{scope.row.product_show_click_ucnt_ratio | keepTwoNum}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_click_pay_ucnt_ratio" label="点击-成交率(%)" min-width="180">
                        <template slot-scope="scope">
                            {{scope.row.product_click_pay_ucnt_ratio | keepTwoNum}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="gpm" label="gpm" min-width="140">
                    </el-table-column>
                    <el-table-column prop="sale_rate" label="销售占比(%)" min-width="160">
                        <template slot-scope="scope">
                            {{scope.row.sale_rate | keepTwoNum}}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page_box flexbox flexcenter">
                    <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="shopInfo.page" :page-size="shopInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="shop_total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            wh_loading: false,
            pay_loading: false,
            deal_loading: false,
            mf_loading: false,
            ff_loading: false,
            ad_loading: false,
            sp_loading: false,
            st_loading: false,
            an_loading: false,
            tr_loading: false,
            is_flow: false,
            is_shop: false,
            currActive: 1,
            radio1: 1,
            liveInfo: {
                page: 1,
                limit: 20,
            },
            day: [],
            tableData: [],
            zongheInfo: {},
            //流量来源
            pay_rate: "",
            pay_rate_width: "",
            pay_rate_all: "",
            natural_rate: "",
            natural_rate_width: "",
            natural_rate_all: "",
            startDate: "",
            payFlow: [],
            naturalFlow: [],
            otherFlow: [],
            pieData: [],
            //流量来源
            mfWatch: [],
            mfCount: {},
            ffWatch: [],
            ffCount: {},
            //成交来源
            deal_pay_rate: "",
            deal_natural_rate: "",
            deal_pay_rate_width: "",
            deal_natural_rate_width: "",
            deal_pay_rate_all: "",
            deal_natural_rate_all: "",
            dealPayFlow: [],
            dealNaturalFlow: [],
            dealOtherFlow: [],
            dealPieData: [],
            //成交来源
            x_data: [],
            y_data: [],
            adverTraffic: {},
            naturalTraffic: {},
            shopConversion: {},
            tableData2: [],
            tableData3: [],
            analysisData: [],
            analysisValue: -1,
            analysisList: [],
            analysisType: 1,
            shopInfo: {
                page: 1,
                limit: 20,
                day: [],
                field: "",
                order: "",
            },
            trendInfo: {
                day: [],
                type: "cost",
            },
            shop_total: 0,
            shop_setpage: 1,
        };
    },
    created() {
        let sessionForm = JSON.parse(window.sessionStorage.getItem("liveDay"));
        if (sessionForm) {
            this.day = sessionForm.day;
            this.shopInfo = sessionForm.shopInfo;
            this.liveInfo = sessionForm.liveInfo;
            this.trendInfo = sessionForm.trendInfo;
        } else {
            this.day = this.formatNowDate();
            this.shopInfo.day = this.formatNowDate();
            this.trendInfo.day = this.formatNowDate();
        }

        this.getLiveList();
        this.getWholeList();
        this.getPaySource();
        this.getDealSource();
        this.getTrend();
        this.getCharge();
        this.getStructure();
        this.getAnalysis();
        this.getFlowconversion();
        this.getPayconversion();
        this.getShoplist(1);
    },
    methods: {
        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        sesstionData() {
            let sessionForm = {
                day: this.day,
                shopInfo: this.shopInfo,
                liveInfo: this.liveInfo,
                trendInfo: this.trendInfo,
            };
            window.sessionStorage.setItem(
                "liveDay",
                JSON.stringify(sessionForm)
            );
        },

        // 选择日期
        selectDay() {
            this.shopInfo.day = this.day;
            this.trendInfo.day = this.day;
            this.getLiveList();
            this.getWholeList();
            this.getPaySource();
            this.getDealSource();
            this.getTrend();
            this.getCharge();
            this.getStructure();
            this.getAnalysis();
            this.getFlowconversion();
            this.getPayconversion();
            this.getShoplist(1);
            this.sesstionData();
        },

        formatNowDate() {
            let date = new Date();
            var myyear = date.getFullYear();
            var mymonth =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            var myweekday =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            let day_start = myyear + "-" + mymonth + "-" + myweekday;
            let day = [day_start, day_start];
            return day;
        },

        // 秒数转换
        secondToTimeStr(t) {
            if (t==='') return;
            if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i) + "秒";
            if (t < 3600)
                return (
                    "" +
                    ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
                    "分" +
                    ((i = t % 60) < 10 ? "0" + i : i) +
                    "秒"
                );
            if (3600 <= t) {
                var a,
                    i,
                    e = parseInt(t / 3600);
                return (
                    (e < 10 ? "0" + e : e) +
                    "时" +
                    ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
                    "分" +
                    ((i = t % 60) < 10 ? "0" + i : i) +
                    "秒"
                );
            }
        },
        

        //获取直播间
        async getLiveList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/roomsum",
                {
                    day: this.day,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.live_total = res.data.count;
                if (res.data.list.length > 0) {
                    this.startDate = this.secondToTimeStr(
                        res.data.list[0].duration
                    );
                } else {
                    this.startDate = 0;
                }
            }
        },

        //获取综合指数
        async getWholeList() {
            this.wh_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/wholesum",
                {
                    day: this.day,
                }
            );
            if (res.code !== 200) {
                this.wh_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.zongheInfo = res.data;
                this.wh_loading = false;
            }
        },

        //获取成交来源
        async getDealSource() {
            this.deal_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/sourcesum",
                {
                    day: this.day,
                    flow_type: 2,
                }
            );
            if (res.code !== 200) {
                this.deal_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.deal_loading = false;
                let pieData = [];
                let otherData = [];
                let pay_rate_all = null;
                let natural_rate_all = null;
                let pay_obj = {
                    name: "付费流量",
                    value: null,
                };
                let nat_obj = {
                    name: "直播自然推荐流量",
                    value: null,
                };
                for (let i in res.data.pay) {
                    pay_obj.value += Number(res.data.pay[i].numerical);
                    pay_rate_all += Number(res.data.pay[i].rate);
                    if (res.data.pay[i].source_type == 8) {
                        res.data.pay[i].title = "千川PC广告";
                    } else if (res.data.pay[i].source_type == 9) {
                        res.data.pay[i].title = "小店随心推";
                    } else if (res.data.pay[i].source_type == 2002) {
                        res.data.pay[i].title = "千川品牌广告";
                    } else if (res.data.pay[i].source_type == 2003) {
                        res.data.pay[i].title = "其他竞价广告";
                    } else if (res.data.pay[i].source_type == 2004) {
                        res.data.pay[i].title = "其他品牌广告";
                    }
                }
                for (let i in res.data.natural) {
                    nat_obj.value += Number(res.data.natural[i].numerical);
                    natural_rate_all += Number(res.data.natural[i].rate);
                    if (res.data.natural[i].source_type == 202) {
                        res.data.natural[i].title = "推荐feeds";
                    } else if (res.data.natural[i].source_type == 203) {
                        res.data.natural[i].title = "直播广场";
                    } else if (res.data.natural[i].source_type == 204) {
                        res.data.natural[i].title = "同城feeds";
                    } else if (res.data.natural[i].source_type == 205) {
                        res.data.natural[i].title = "其他";
                    }
                }
                for (let i in res.data.other) {
                    if (res.data.other[i].source_type == 206) {
                        res.data.other[i].title = "关注tab";
                        otherData.push({
                            name: "关注tab",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 201) {
                        res.data.other[i].title = "短视频引流";
                        otherData.push({
                            name: "短视频引流",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 207) {
                        res.data.other[i].title = "搜索";
                        otherData.push({
                            name: "搜索",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 209) {
                        res.data.other[i].title = "抖音商场";
                        otherData.push({
                            name: "抖音商场",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 208) {
                        res.data.other[i].title = "个人主页";
                        otherData.push({
                            name: "个人主页",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 210) {
                        res.data.other[i].title = "活动页";
                        otherData.push({
                            name: "活动页",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 2011) {
                        res.data.other[i].title = "其他";
                        otherData.push({
                            name: "其他",
                            value: res.data.other[i].numerical,
                        });
                    }
                }

                pieData = [pay_obj, nat_obj, ...otherData];
                this.dealPieData = pieData;
                this.dealPayFlow = res.data.pay;
                this.dealNaturalFlow = res.data.natural;
                this.dealOtherFlow = res.data.other;
                this.deal_pay_rate_width =
                    res.data.pay_rate == 0
                        ? 50
                        : Number(res.data.pay_rate) * 100;
                this.deal_natural_rate_width =
                    res.data.natural_rate == 0
                        ? 50
                        : Number(res.data.natural_rate) * 100;
                this.deal_pay_rate = (Number(res.data.pay_rate) * 100).toFixed(
                    0
                );
                this.deal_natural_rate = (
                    Number(res.data.natural_rate) * 100
                ).toFixed(0);
                this.deal_pay_rate_all = Number(pay_rate_all * 100).toFixed(0);
                this.deal_natural_rate_all = Number(
                    natural_rate_all * 100
                ).toFixed(0);
                if (res.data.pay.length > 0) {
                    this.$nextTick(() => {
                        this.dealPieChart();
                    });
                }
            }
        },

        //获取免费来源
        async getPaySource() {
            this.pay_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/sourcesum",
                {
                    day: this.day,
                    flow_type: 1,
                }
            );
            if (res.code !== 200) {
                this.pay_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                let pieData = [];
                let otherData = [];
                let pay_rate_all = null;
                let natural_rate_all = null;
                let pay_obj = {
                    name: "付费流量",
                    value: null,
                };
                let nat_obj = {
                    name: "直播自然推荐流量",
                    value: null,
                };
                for (let i in res.data.pay) {
                    pay_obj.value += Number(res.data.pay[i].numerical);
                    pay_rate_all += Number(res.data.pay[i].rate);
                    if (res.data.pay[i].source_type == 8) {
                        res.data.pay[i].title = "千川PC广告";
                    } else if (res.data.pay[i].source_type == 9) {
                        res.data.pay[i].title = "小店随心推";
                    } else if (res.data.pay[i].source_type == 2002) {
                        res.data.pay[i].title = "千川品牌广告";
                    } else if (res.data.pay[i].source_type == 2003) {
                        res.data.pay[i].title = "其他竞价广告";
                    } else if (res.data.pay[i].source_type == 2004) {
                        res.data.pay[i].title = "其他品牌广告";
                    }
                }
                for (let i in res.data.natural) {
                    nat_obj.value += Number(res.data.natural[i].numerical);
                    natural_rate_all += Number(res.data.natural[i].rate);
                    if (res.data.natural[i].source_type == 202) {
                        res.data.natural[i].title = "推荐feeds";
                    } else if (res.data.natural[i].source_type == 203) {
                        res.data.natural[i].title = "直播广场";
                    } else if (res.data.natural[i].source_type == 204) {
                        res.data.natural[i].title = "同城feeds";
                    } else if (res.data.natural[i].source_type == 205) {
                        res.data.natural[i].title = "其他";
                    }
                }
                for (let i in res.data.other) {
                    if (res.data.other[i].source_type == 206) {
                        res.data.other[i].title = "关注tab";
                        otherData.push({
                            name: "关注tab",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 201) {
                        res.data.other[i].title = "短视频引流";
                        otherData.push({
                            name: "短视频引流",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 207) {
                        res.data.other[i].title = "搜索";
                        otherData.push({
                            name: "搜索",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 209) {
                        res.data.other[i].title = "抖音商场";
                        otherData.push({
                            name: "抖音商场",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 208) {
                        res.data.other[i].title = "个人主页";
                        otherData.push({
                            name: "个人主页",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 210) {
                        res.data.other[i].title = "活动页";
                        otherData.push({
                            name: "活动页",
                            value: res.data.other[i].numerical,
                        });
                    } else if (res.data.other[i].source_type == 2011) {
                        res.data.other[i].title = "其他";
                        otherData.push({
                            name: "其他",
                            value: res.data.other[i].numerical,
                        });
                    }
                }

                pieData = [pay_obj, nat_obj, ...otherData];
                this.pieData = pieData;
                this.payFlow = res.data.pay;
                this.naturalFlow = res.data.natural;
                this.otherFlow = res.data.other;
                this.pay_rate_width =
                    res.data.pay_rate == 0
                        ? 50
                        : Number(res.data.pay_rate) * 100;
                this.natural_rate_width =
                    res.data.natural_rate == 0
                        ? 50
                        : Number(res.data.natural_rate) * 100;
                this.pay_rate = (Number(res.data.pay_rate) * 100).toFixed(0);
                this.natural_rate = (
                    Number(res.data.natural_rate) * 100
                ).toFixed(0);
                this.pay_rate_all = Number(pay_rate_all * 100).toFixed(0);
                this.natural_rate_all = Number(natural_rate_all * 100).toFixed(
                    0
                );
                if (res.data.pay.length > 0) {
                    this.$nextTick(() => {
                        this.dirPieChart();
                    });
                }
                this.pay_loading = false;
            }
        },

        //获取整体指标趋势
        async getTrend() {
            this.tr_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/trend",
                this.trendInfo
            );
            if (res.code !== 200) {
                this.tr_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.x_data = res.data.x;
                this.y_data = res.data.y.map(Number);
                if (res.data.x.length > 0) {
                    this.$nextTick(() => {
                        this.timeChart();
                    });
                }
                this.tr_loading = false;
            }
        },

        changeCount(type) {
            this.trendInfo.type = type;
            this.getTrend();
        },

        // 时间曲线数据图表
        timeChart() {
            const myChart = this.$echarts.init(
                document.getElementById("timeChart")
            );
            var option = {
                color: ["#4475FF"],
                title: {},
                grid: {
                    left: "2%",
                    right: "2%",
                    bottom: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    data: this.x_data,
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "rgba(97, 108, 133, 0.2)",
                        },
                    },
                },
                series: [
                    {
                        smooth: true,
                        showSymbol: false,
                        name: this.chart_text,
                        type: "line",
                        data: this.y_data,
                        lineStyle: {
                            color: "#4475FF",
                            width: 3,
                            shadowColor: "rgba(162, 59, 84, 0.31)",
                            shadowBlur: 5,
                            shadowOffsetY: 2,
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        // 流量图表
        dirPieChart() {
            let that = this;
            const myChart = this.$echarts.init(
                document.getElementById("dirPieChart")
            );
            var option = {
                tooltip: {
                    trigger: "item",
                    position: function (point, params, dom, rect, size) {
                        return [point[0], "10%"];
                    },
                    formatter: function (params) {
                        if (params.name == "付费流量") {
                            let text = `<div>
                                <div class="font_14 color_01">付费流量：(${
                                    params.value
                                })${that.pay_rate_all}%</div>
                                <div class="font_12 color_02">${
                                    that.payFlow[0].title
                                }：(${that.payFlow[0].numerical})${(
                                Number(that.payFlow[0].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.payFlow[1].title
                                }：(${that.payFlow[1].numerical})${(
                                Number(that.payFlow[1].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.payFlow[2].title
                                }：(${that.payFlow[2].numerical})${(
                                Number(that.payFlow[2].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.payFlow[3].title
                                }：(${that.payFlow[3].numerical})${(
                                Number(that.payFlow[3].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.payFlow[4].title
                                }：(${that.payFlow[4].numerical})${(
                                Number(that.payFlow[4].rate) * 100
                            ).toFixed(0)}%</div>
                                </div>
                            `;
                            return text;
                        } else if (params.name == "直播自然推荐流量") {
                            let text = `<div>
                                <div class="font_14 color_01">直播自然推荐流量：(${
                                    params.value
                                })${that.natural_rate_all}%</div>
                                <div class="font_12 color_02">${
                                    that.naturalFlow[0].title
                                }：(${that.naturalFlow[0].numerical})${(
                                Number(that.naturalFlow[0].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.naturalFlow[1].title
                                }：(${that.naturalFlow[1].numerical})${(
                                Number(that.naturalFlow[1].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.naturalFlow[2].title
                                }：(${that.naturalFlow[2].numerical})${(
                                Number(that.naturalFlow[2].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.naturalFlow[3].title
                                }：(${that.naturalFlow[3].numerical})${(
                                Number(that.naturalFlow[3].rate) * 100
                            ).toFixed(0)}%</div>
                                </div>
                            `;
                            return text;
                        } else {
                            let text = `<div>
                                <div class="font_14 color_01">${
                                    params.name
                                }：(${params.value})${params.percent.toFixed(
                                0
                            )}%</div>
                                </div>
                            `;
                            return text;
                        }
                    },
                },
                color: [
                    "#4475FF",
                    "#00CB82",
                    "#FF855F",
                    "#FFD74B",
                    "#49BEFF",
                    "#00C6D2",
                    "#FF8080",
                    "#0082CB",
                    "#DFAAFF",
                ],
                legend: {
                    show: false,
                    top: "5%",
                    left: "center",
                    formatter: (name) => {
                        return name.slice(0, 6);
                    },
                },
                series: [
                    {
                        type: "pie",
                        radius: ["65%", "95%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "15",
                                fontWeight: "bold",
                                formatter: (name) => {
                                    return name.name.slice(0, 10);
                                },
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.pieData,
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        // 成交图表
        dealPieChart() {
            let that = this;
            const myChart = this.$echarts.init(
                document.getElementById("dealPieChart")
            );
            var option = {
                tooltip: {
                    trigger: "item",
                    position: function (point, params, dom, rect, size) {
                        return [point[0], "10%"];
                    },
                    formatter: function (params) {
                        if (params.name == "付费流量") {
                            let text = `<div>
                                <div class="font_14 color_01">付费流量：(${
                                    params.value
                                })${that.deal_pay_rate_all}%</div>
                                <div class="font_12 color_02">${
                                    that.dealPayFlow[0].title
                                }：(${that.dealPayFlow[0].numerical})${(
                                Number(that.dealPayFlow[0].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.dealPayFlow[1].title
                                }：(${that.dealPayFlow[1].numerical})${(
                                Number(that.dealPayFlow[1].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.dealPayFlow[2].title
                                }：(${that.dealPayFlow[2].numerical})${(
                                Number(that.dealPayFlow[2].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.dealPayFlow[3].title
                                }：(${that.dealPayFlow[3].numerical})${(
                                Number(that.dealPayFlow[3].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.dealPayFlow[4].title
                                }：(${that.dealPayFlow[4].numerical})${(
                                Number(that.dealPayFlow[4].rate) * 100
                            ).toFixed(0)}%</div>
                                </div>
                            `;
                            return text;
                        } else if (params.name == "直播自然推荐流量") {
                            let text = `<div>
                                <div class="font_14 color_01">直播自然推荐流量：(${
                                    params.value
                                })${that.deal_natural_rate_all}%</div>
                                <div class="font_12 color_02">${
                                    that.dealNaturalFlow[0].title
                                }：(${that.dealNaturalFlow[0].numerical})${(
                                Number(that.dealNaturalFlow[0].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.dealNaturalFlow[1].title
                                }：(${that.dealNaturalFlow[1].numerical})${(
                                Number(that.dealNaturalFlow[1].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.dealNaturalFlow[2].title
                                }：(${that.dealNaturalFlow[2].numerical})${(
                                Number(that.dealNaturalFlow[2].rate) * 100
                            ).toFixed(0)}%</div>
                                <div class="font_12 color_02">${
                                    that.dealNaturalFlow[3].title
                                }：(${that.dealNaturalFlow[3].numerical})${(
                                Number(that.dealNaturalFlow[3].rate) * 100
                            ).toFixed(0)}%</div>
                                </div>
                            `;
                            return text;
                        } else {
                            let text = `<div>
                                <div class="font_14 color_01">${
                                    params.name
                                }：(${params.value})${params.percent.toFixed(
                                0
                            )}%</div>
                                </div>
                            `;
                            return text;
                        }
                    },
                },
                color: [
                    "#4475FF",
                    "#00CB82",
                    "#FF855F",
                    "#FFD74B",
                    "#49BEFF",
                    "#00C6D2",
                    "#FF8080",
                    "#0082CB",
                    "#DFAAFF",
                ],
                legend: {
                    show: false,
                    top: "5%",
                    left: "center",
                    formatter: (name) => {
                        return name.slice(0, 6);
                    },
                },
                series: [
                    {
                        type: "pie",
                        radius: ["65%", "95%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "15",
                                fontWeight: "bold",
                                formatter: (name) => {
                                    return name.name.slice(0, 10);
                                },
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.dealPieData,
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取付费观看人次
        async getCharge() {
            this.ff_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/charge",
                {
                    day: this.day,
                }
            );
            if (res.code !== 200) {
                this.ff_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data.list) {
                    if (res.data.list[i].types == 1) {
                        res.data.list[i].title = "直投";
                    } else if (res.data.list[i].types == 2) {
                        res.data.list[i].title = "视频";
                    } else if (res.data.list[i].types == 3) {
                        res.data.list[i].title = "搜索";
                    }
                }
                this.ffWatch = res.data.list;
                this.ffCount = res.data.sum;
                this.ff_loading = false;
            }
        },

        //获取用户行为分析
        async getAnalysis() {
            this.an_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/analysis",
                {
                    day: this.day,
                }
            );
            if (res.code !== 200) {
                this.an_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.an_loading = false;
                this.tableData3 = res.data.data;
                let chartData = [];
                let newsArr = res.data.data.filter((item) => {
                    return item.from_card == this.analysisValue;
                });
                for (let i in newsArr) {
                    chartData.push([
                        Number(newsArr[i].flow_num),
                        Number((newsArr[i].flow_rate * 100).toFixed(2)),
                        newsArr[i].category,
                        newsArr[i].compete_flow_rate,
                        newsArr[i].compete_flow_num,
                    ]);
                }
                this.analysisData = chartData;
                if (res.data.data.length > 0) {
                    this.$nextTick(() => {
                        this.analysisChart();
                    });
                }
            }
        },

        // 选择用户类型
        changeAnalysisType() {
            let chartData = [];
            let newsArr = this.tableData3.filter((item) => {
                return item.from_card == this.analysisValue;
            });
            for (let i in newsArr) {
                chartData.push([
                    Number(newsArr[i].flow_num),
                    Number((newsArr[i].flow_rate * 100).toFixed(2)),
                    newsArr[i].category,
                    newsArr[i].compete_flow_rate,
                    newsArr[i].compete_flow_num,
                ]);
            }
            this.analysisData = chartData;
            this.$nextTick(() => {
                this.analysisChart();
            });
        },
        // 选择用户展示方式
        selectAnalysisShow(type) {
            this.analysisType = type;
            if (type == 1) {
                this.$nextTick(() => {
                    this.analysisChart();
                });
            }
        },

        // 时间曲线数据图表
        analysisChart() {
            const myChart = this.$echarts.init(
                document.getElementById("analysisChart")
            );
            var option = {
                grid: {
                    left: "2%",
                    right: "6%",
                    bottom: "5%",
                    containLabel: true,
                },
                color: ["#4475FF"],
                tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                        let title = null
                        if(params.data[2] == 1){
                            title = '短视频/图文带货'
                        }else if(params.data[2] == 2){
                            title = '直播带货'
                        }else if(params.data[2] == 3){
                            title = 'feedslive'
                        }
                        let text = `<div class="font_12 color_02">
                            <div style="color:#4475ff">${title}</div>
                            <div>流转规模:<span style="color:#4475ff">${
                                params.data[0]
                            }</span></div>
                            <div>流转率:<span style="color:#4475ff">${
                                params.data[1]
                            }</span></div>
                            <div>对比品牌均值流转率:<span style="color:#4475ff">${(
                                params.data[3] * 100
                            ).toFixed(2)}</span></div>
                            <div>对比品牌均值流转规模:<span style="color:#4475ff">${
                                params.data[4]
                            }</span></div>
                        </div>`;
                        return text;
                    },
                },
                xAxis: {
                    name: "流转规模",
                    nameGap: 20,
                    nameTextStyle: {
                        fontSize: 12,
                        color: "#616C85",
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#e0e6f1",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#616C85",
                        },
                    },
                },
                yAxis: {
                    name: "流转率(%)",
                    nameGap: 20,
                    nameTextStyle: {
                        fontSize: 12,
                        color: "#616C85",
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#e0e6f1",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#616C85",
                        },
                    },
                },
                series: [
                    {
                        symbolSize: 10,
                        data: this.analysisData,
                        type: "scatter",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: (param) => {
                                        let text = null
                                        if(param.data[2] == 1){
                                            text = '短视频/图文带货'
                                        }else if(param.data[2] == 2){
                                            text = '直播带货'
                                        }else if(param.data[2] == 3){
                                            text = 'feedslive'
                                        }
                                        return text
                                    },
                                    position: "top",
                                },
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取免费观看人次
        async getStructure() {
            this.mf_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/structuresum",
                {
                    day: this.day,
                }
            );
            if (res.code !== 200) {
                this.mf_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data.list) {
                    if (res.data.list[i].structure_type == 1) {
                        res.data.list[i].title = "推荐Feed";
                    } else if (res.data.list[i].structure_type == 2) {
                        res.data.list[i].title = "关注";
                    } else if (res.data.list[i].structure_type == 3) {
                        res.data.list[i].title = "短视频引流";
                    } else if (res.data.list[i].structure_type == 4) {
                        res.data.list[i].title = "搜索";
                    } else if (res.data.list[i].structure_type == 5) {
                        res.data.list[i].title = "其他";
                    }
                }
                this.mfWatch = res.data.list;
                this.mfCount = res.data.sum;
                this.mf_loading = false;
            }
        },

        //获取流量转化路径
        async getFlowconversion() {
            this.ad_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/flowconversionsum",
                {
                    day: this.day,
                }
            );
            if (res.code !== 200) {
                this.ad_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                if (res.data.length > 0) {
                    this.is_flow = true;
                    this.adverTraffic = res.data[0];
                    this.naturalTraffic = res.data[1];
                } else {
                    this.is_flow = false;
                }
                this.ad_loading = false;
            }
        },

        //获取商品转化路径
        async getPayconversion() {
            this.sp_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/payconversionsum",
                {
                    day: this.day,
                }
            );
            if (res.code !== 200) {
                this.sp_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                if (res.data.length == 0) {
                    this.is_shop = false;
                } else {
                    this.is_shop = true;
                    this.shopConversion = res.data;
                }
                this.sp_loading = false;
            }
        },

        //获取商品列表
        async getShoplist(page) {
            this.shopInfo.page = page;
            this.st_loading = true;
            const { data: res } = await this.$http.post(
                "compassapi/Retailersday/productlistsum",
                this.shopInfo
            );
            if (res.code !== 200) {
                this.st_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.tableData2 = res.data.list;
                this.shop_total = res.data.count;
                this.st_loading = false;
            }
        },

        // 排序
        sortChange(column) {
            this.shopInfo.field = "";
            this.shopInfo.order = "";
            if (!column.order) {
                this.getShoplist(this.shop_setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.shopInfo.order = order;
            this.shopInfo.field = column.prop;
            this.getShoplist(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.liveInfo.limit = val;
            this.getLiveList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.live_setpage = val;
            this.getLiveList(val);
        },

        // 每页显示多少条数据
        handleSizeChange2(val) {
            this.shopInfo.limit = val;
            this.getShoplist(1);
        },
        // 当前页切换
        handleCurrentChange2(val) {
            this.shop_setpage = val;
            this.getShoplist(val);
        },
    },
    components: {},
};
</script>

<style>
.comss_table.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: unset !important;
}
.comss_table .el-table__row {
    cursor: pointer;
}
</style>

<style scoped>
.pb_null {
    padding-bottom: 0;
}
.mt_12 {
    margin-top: 12px;
}
.mt_16 {
    margin-top: 16px;
}
.mt_24 {
    margin-top: 24px;
}
.pass_box {
    border: 1px solid #ebebeb;
    padding: 16px;
}
.pass_title {
    font-size: 14px;
    color: #17233d;
    padding-left: 8px;
    position: relative;
    font-weight: bold;
}
.pass_title::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 8px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #4475ff;
    border-radius: 1px;
}
.brand_head {
    margin-top: 15px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    height: 55px;
    border-bottom: 1px solid #ebebeb;
}
.brand_item {
    position: relative;
    cursor: pointer;
    height: 55px;
    margin-right: 20px;
}
.brand_title {
    font-size: 14px;
    color: #616c85;
}
.brand_item::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    height: 2px;
    background: #4475ff;
    bottom: 0;
    transform: scaleX(0);
    transition: all 0.3s;
}
.brand_item.active::after {
    transform: scaleX(1);
}
.brand_item.active .brand_title {
    color: #17233d;
}
.com_table {
    margin-top: 20px;
}
.shop_time {
    margin-left: 5px;
}
.zonghe_line {
    margin: 24px 0;
    border-bottom: 1px solid #ebebeb;
}
.zonghe_box {
    flex-wrap: wrap;
}
.zonghe_item {
    width: 175px;
    height: 110px;
    background: #f8f9fb;
    border-radius: 4px;
    padding-left: 16px;
    padding-right: 10px;
    margin-right: 16px;
    margin-top: 16px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #f8f9fb;
}
.zonghe_item.active {
    background: rgba(68, 117, 255, 0.08);
    border: 1px solid #4475ff;
}
.zh_text {
    font-size: 13px;
    color: #616c85;
    line-height: 18px;
    height: 18px;
}
.zh_val {
    font-family: "DINPro";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    height: 26px;
    color: #17233d;
    margin-top: 8px;
}
.zh_rat {
    font-size: 13px;
    line-height: 18px;
    height: 18px;
    margin-top: 8px;
    color: #b4b7bd;
}
.zh_rat.green {
    color: #00c271;
}
.zh_rat.red {
    color: #fe6262;
}
.flow_title {
    max-width: 1134px;
    border-radius: 2px;
    overflow: hidden;
}
.flow_item {
    height: 32px;
    box-sizing: border-box;
    padding: 0 20px;
    width: 50%;
    font-size: 12px;
    color: #fff;
}
.flow_item.blue {
    background: #4475ff;
}
.flow_item.green {
    background: #00d494;
}
.deal_box {
    max-width: 1134px;
}
.deal_left {
    width: 200px;
}
.deal_right {
    height: 200px;
    margin-left: 45px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px;
}
.deal_pay {
    width: 210px;
    height: 100%;
}
.deal_live {
    width: 210px;
    padding: 0 60px;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    height: 100%;
}
.deal_other {
    width: 210px;
    height: 100%;
}
.deal_item {
    height: 22px;
    font-size: 13px;
}
.pay_circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}
.pay_circle_blue {
    background: #4475ff;
}
.pay_circle_green {
    background: #00cb82;
}
.pay_circle_0 {
    background: #ff855f;
}
.pay_circle_1 {
    background: #ffd74b;
}
.pay_circle_2 {
    background: #49beff;
}
.pay_circle_3 {
    background: #00c6d2;
}
.pay_circle_4 {
    background: #ff8080;
}
.pay_circle_5 {
    background: #0082cb;
}
.pay_circle_6 {
    background: #dfaaff;
}
.pay_wach_box {
    flex-wrap: wrap;
}
.pay_wach_item {
    width: 270px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    margin-top: 16px;
    margin-right: 12px;
}
.flow_count {
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    padding: 0 16px;
    height: 80px;
    margin-top: 16px;
}
.count_line {
    height: 16px;
    border-left: 1px solid #ebebeb;
    margin: 0 20px;
}
.count_item {
    padding: 0 20px;
}
.count_text {
    font-size: 13px;
    color: #616c85;
    line-height: 18px;
    height: 18px;
}
.count_val {
    font-family: "DINPro";
    font-size: 20px;
    line-height: 26px;
    height: 26px;
    margin-top: 8px;
}
.wach_top {
    height: 46px;
    padding: 0 12px;
    background: rgba(165, 177, 209, 0.08);
}
.wach_title {
    margin-left: 8px;
}
.wach_bot {
    padding: 5px 12px;
}
.wach_bot_item {
    height: 36px;
    line-height: 36px;
}
.wach_text {
    font-size: 13px;
    color: #616c85;
}
.wach_val {
    font-size: 14px;
    color: #17233d;
    font-weight: 400;
}
.rat_box {
    margin-top: 24px;
}
.rat_item {
    width: 245px;
    font-size: 13px;
    color: #616c85;
}
.rat_item span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}
.rat_item span.blue {
    background: #4475ff;
}
.rat_item span.green {
    background: #00d494;
}
.rat_content {
    position: relative;
    margin-top: 20px;
    padding-bottom: 30px;
}
.flow_bg {
    display: block;
    margin: 0 auto;
}
.rat_text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #fff;
    text-shadow: 0px 1px 3px rgba(64, 64, 64, 0.5);
}
.rat_text_black {
    position: absolute;
    font-size: 12px;
    color: #616c85;
    width: 65px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
.rat_text1 {
    top: 40px;
}
.rat_text2 {
    top: 124px;
}
.rat_text3 {
    top: 205px;
}
.rat_text4 {
    top: 285px;
}
.rat_text5 {
    top: 355px;
}
.rat_text6 {
    top: 15px;
}
.rat_text7 {
    top: 95px;
}
.rat_text8 {
    top: 175px;
}
.rat_text9 {
    top: 260px;
}
.rat_text10 {
    top: 335px;
}
.rat_text11 {
    top: 232px;
    margin-left: -290px;
}
.rat_text12 {
    top: 142px;
    margin-left: -208px;
}
.rat_text13 {
    top: 228px;
    margin-left: -160px;
}
.rat_text14 {
    top: 314px;
    margin-left: -114px;
}
.rat_text15 {
    top: 232px;
    margin-left: 302px;
}
.rat_text16 {
    top: 142px;
    margin-left: 218px;
}
.rat_text17 {
    top: 228px;
    margin-left: 170px;
}
.rat_text18 {
    top: 314px;
    margin-left: 125px;
}
.rat_value_box {
    width: 190px;
    box-sizing: border-box;
    padding: 0 15px;
}
.rat_value_box_l {
    text-align: right;
    margin-left: -95px;
}
.rat_value_box_r {
    text-align: left;
    margin-left: 95px;
}
.shop_content {
    position: relative;
    margin-top: 16px;
    padding-bottom: 20px;
}
.shop_rat_text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #fff;
    line-height: 22px;
    width: 455px;
    text-align: right;
    box-sizing: border-box;
    padding-right: 20px;
    margin-left: -30px;
}
.shop_rat_text_black {
    position: absolute;
    font-size: 12px;
    color: #616c85;
    width: 85px;
    text-align: center;
    line-height: 22px;
    left: 50%;
    transform: translateX(-50%);
}
.shop_rat_text10 {
    top: 10px;
}
.shop_rat_text1 {
    top: 90px;
}
.shop_rat_text2 {
    top: 165px;
}
.shop_rat_text3 {
    top: 245px;
}
.shop_rat_text4 {
    top: 324px;
}
.shop_rat_text5 {
    top: 324px;
    text-align: left;
    margin-left: 160px;
}
.shop_rat_text6 {
    top: 135px;
    margin-left: -270px;
}
.shop_rat_text7 {
    top: 35px;
    margin-left: 250px;
}
.shop_rat_text8 {
    top: 114px;
    margin-left: 250px;
}
.shop_rat_text9 {
    top: 212px;
    margin-left: 250px;
}
.shop_rat_text11 {
    width: 250px;
    text-align: left;
    top: 165px;
    margin-left: -10px;
}
.shop_rat_text12 {
    top: 302px;
    margin-left: 250px;
}
.live_img {
    width: 56px;
    height: 56px;
    border-radius: 2px;
}
.live_name {
    margin-left: 20px;
    font-size: 14px;
    color: #17233d;
}
.author_info_img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
}
.live_author_info {
    margin-left: 12px;
}
.author_info_name {
    font-size: 14px;
    color: #17233d;
    height: 20px;
    line-height: 20px;
}
.author_info_id {
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    color: #b4b7bd;
    margin-top: 5px;
}
.analysis_item {
    cursor: pointer;
    padding: 5px;
}
.analysis_item.active svg {
    stroke: #4475ff;
}
</style>

